<template>
  <div class="login">
    <div class="form">
      <h3>用户登录</h3>
      <input type="text" placeholder="用户名" name="username" required="required">
      <input type="password" placeholder="密码" name="password" required="required">
      <span>
      	<input type="text" name="imageCode" placeholder="验证码" style="width: 50%" v-model="validateCode">
	      <img :src="imageURL">  <!-- src=/code/image -->
      </span>

      <button type="submit" @click="login">登录</button>
    </div>
  </div>
</template>

<script lang="ts" setup>
 import { ref } from '@vue/reactivity'
 import Axios from 'axios'
 Axios.defaults.withCredentials = true
 const imageURL = 'http://localhost:8081/login/code'
 const validateCode = ref('')

 function login() {
   Axios.get('http://localhost:8081/login', {
     params: {
       validateCode: validateCode.value
     }
   })
 }
</script>
<style lang="scss" scoped>
 div.login {
   width: 360px;
   padding: 8% 0 0;
   margin: auto;

   div.form {
     position: relative;
     z-index: 1;
     background: #ffffff;
     max-width: 360px;
     margin: 0 auto 100px;
     padding: 45px;
     text-align: center;
     box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);

     input {
       outline: 0;
       background: #f2f2f2;
       width: 100%;
       border: 0;
       margin: 0 0 15px;
       padding: 15px;
       box-sizing: border-box;
       font-size: 14px;
     }

     button {
       text-transform: uppercase;
       outline: 0;
       background: #4caf50;
       width: 100%;
       border: 0;
       padding: 15px;
       color: #ffffff;
       font-size: 14px;
       transition: all 0.3 ease;
       cursor: pointer;

       &:hover, &:active, &:focus {
	       background: #43a047;
       }
     }

     
   }
 }
</style>